@import "../../styles/colors.scss";

.mod-cta .setting-button-icon {
  margin-right: 0.5em;
}

.setting-item-control {
  .react-aria-TextField {
    display: flex;
    flex-direction: column;

    & > * + * {
      margin-top: 0.5em;
    }

    input {
      &[data-invalid] {
        border: 1px solid var(--background-modifier-error);
      }
    }

    .react-aria-FieldError {
      color: var(--text-error);
      font-size: var(--font-small);
    }
  }
}

.setting-item-deprecation-notice {
  display: flex;
  background-color: rgba(var(--color-yellow-rgb), 0.2);
  padding: 4px 12px;
  border-radius: 8px;
  margin-top: 0.5em;

  .setting-item-deprecation-notice-message {
    margin-left: 0.5em;
  }
}

.setting-item-build-stamp {
  font-size: var(--font-smaller);
}

.project-dropdown-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5em;

  .project-dropdown-warning-icon {
    display: flex;
    align-items: center;
    color: var(--text-warning);
  }
}

.labels-control-container {
  display: flex;
  flex-direction: column;
  gap: 1em;

  .labels-control-list {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: var(--font-ui-small);
  }

  .labels-control-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .labels-control-item-details {
      display: flex;
      align-items: center;
      gap: 0.5em;

      .labels-control-item-name {
        flex: 1;
      }

      .label-icon {
        @each $name, $color in $todoist-colors {
          &[data-label-color="#{$name}"] {
            color: var(--todoist-#{$name});
          }
        }
      }

      .label-deleted-warning-icon {
        color: var(--text-warning);
        display: none;
      }
    }

    .labels-control-remove-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border: none;
      background: none;
      color: var(--text-muted);
      cursor: pointer;
      margin-left: 1em;

      &:hover {
        background-color: var(--background-modifier-hover);
        color: var(--text-normal);
      }
    }

    &.is-deleted {
      .label-icon {
        display: none;
      }

      .label-deleted-warning-icon {
        display: block;
      }

      .labels-control-item-name {
        color: var(--text-muted);
      }
    }
  }

  .labels-control-empty-state {
    text-align: right;
    color: var(--text-muted);
    font-style: italic;
  }
}

// Top align setting items that contain the labels control
.setting-item:has(.labels-control-container) {
  align-items: flex-start;

  .setting-item-info {
    padding-top: 0.25em;
  }
}
